import { useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { findParentByChildPath, splitArrayEvenly } from '../../Utils'

const Nav = ({ smallWindow, routerConfig }) => {
    const Navigate = useNavigate()
    const [TwoNav, setTwoNav] = useState([])
    const { pathname } = useLocation()
    const [, , page, id] = pathname.split('/')
    const navList = splitArrayEvenly(routerConfig.filter(v => v.router_path !== 'Home'))
    const data = findParentByChildPath(routerConfig, page, 'router_path')


    return (
        <div className='StartNav'>
            {navList.map((arr, index) => (
                <div className='NavA' key={index}>
                    {arr.map(item => {
                        const { uuid, router_name, children } = item
                        const Status = children.findIndex(v => v.router_path === page) !== -1
                        return (
                            <div
                                key={uuid}
                                className={Status ? 'Active' : ''}
                                onClick={() => Navigate(`/Start/${children[0].router_path}`)}
                            >
                                {router_name}
                            </div>
                        )
                    })}
                </div>
            ))}
            {data?.children && data.children.length > 1 &&
                <div className='NavB'>
                    {data.children.map(({ uuid, router_name, router_path }) =>
                        <div
                            key={uuid}
                            className={router_path === page ? 'Active' : ''}
                            onClick={() => Navigate(`/Start/${router_path}`)}
                        >
                            <div>{router_name}</div>
                        </div>
                    )}
                </div>
            }
        </div>
    )
}

export default Nav